<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/lib/jquery-3.3.1.min.js"></script>
    <script src="../js/H5ComponentBase.js"></script>
    <link rel="stylesheet" href="../css/H5ComponentBase.css">
    <script src="../js/H5ComponentPoint.js"></script>
    <link rel="stylesheet" href="../css/H5.css">
    <link rel="stylesheet" href="../css/H5ComponentPoint.css">
    <style>
             body{
            margin:0;
            padding:0;
            background-color: #000;
            font-size: 12px;
        }
        .iphone{
            width:340px;
            height:540px;
            background-color: #fff;
            position: absolute;
            background-color: #fff;
            left:50%;
            top:50%;
            margin:-270px 0 0 -170px;
        }
    </style>
    <script>
        var cfg = {
            type: 'point',
            width: 300,
            height: 300,
            data: [
                ['A项',.4,'green'],
                ['B项',.2,'yellow',0,'-60%'],
                ['C项',.2,'red',0,'120%']
            ],
            css: {
                bottom: 0,
                opacity: 0,
            },
            animateIn: { bottom: '40%', opacity: 1 },
            animateOut: { bottom: 0, opacity: 0 },
            center: true
        }
        $(function () {

            var h5 = new H5ComponentPoint('myName', cfg);
            $('.iphone').append(h5)
            var leave = true;
            $('body').click(function () {
                leave = !leave;
                console.log(leave);
                $('.h5_component').trigger(leave ? 'onLeave' : 'onLoad')
            })
        })
    </script>
</head>

<body>
        <div class="iphone">

            </div>
</body>

</html>